<script setup lang="ts">
import {ref} from "vue";
import {useI18n} from "vue-i18n";
import {I18N} from "../../locale/i18n.ts";

const isMenuVisible = ref(false)
const {t} = useI18n()

const close = () => {
  isMenuVisible.value = false
}

const select = (lang:string) => {
  isMenuVisible.value = false
  I18N.setLanguage(lang)
}

</script>

<template>
  <div class="flex-row lang-holder" @click="isMenuVisible=true">
    <img class="lang-flag" :src="t('selector.flag')"/>
    <div class="flex-row" style="column-gap:1vw">
      <div style="user-select:none">{{ t('selector.name') }}</div>
      <div style="font-size:4vw">▼</div>
    </div>
  </div>
  <div v-if="isMenuVisible" class="mask" @click="close"></div>
  <div v-if="isMenuVisible" class="flex-col menu">
    <div class="flex-row item" @click="select('pt')">
      <img class="lang-flag" src="/images/flag_br.png"/>
      <div class="font-size6">Português<br>(BR)</div>
    </div>
    <div class="flex-row item" @click="select('en')">
      <img class="lang-flag" src="/images/flag_us.png"/>
      <div>English</div>
    </div>
    <div class="flex-row item" @click="select('zh')">
      <img class="lang-flag" src="/images/flag_cn.png"/>
      <div>简体中文</div>
    </div>
  </div>
</template>

<style scoped>
.lang-holder {
  position: relative;
  column-gap: 2vw;
  cursor: pointer;
}

.lang-flag {
  width: 5vw;
  height: 4.8vw;
}

.mask {
  background-color: transparent;
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
}

.menu {
  background-color: white;
  width: 23vw;
  position: absolute;
  top: 10.5vw;
  right: 2vw;
  -webkit-box-shadow: 0 0.5vw 1vw rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 0.5vw 1vw rgba(0, 0, 0, 0.2);
  box-shadow: 0 0.5vw 1vw rgba(0, 0, 0, 0.2);
  transform-origin: top;
  animation: scaleIn 0.2s cubic-bezier(0.33, 1.3, 0.66, 1);
}

.menu .item {
  padding: 3vw 2vw;
  column-gap: 2vw;
  cursor: pointer;
}

.menu .item:active {
  background-color: #eeeeee;
}

@keyframes scaleIn {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}

@media (min-aspect-ratio: 1/1) {
  .lang-holder {
    transform-origin: right;
    transform: scale(0.33);
  }
}
</style>